<template>
  <div id="comparison">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="700px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancel"
    >
      <div class="from"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
      >
        <confilctDialog
          v-if="compareResult === 1"
          label="制度"
          @setFeedbackChecked="setFeedbackChecked"
          :lawContrastResult="lawContrastResult"
          :visibility="conflictDialogCheckBox"
          :compareId="compareId"
        ></confilctDialog>
        <noConfilctDialog v-if="compareResult !== 1" :lawContrastResult="lawContrastResult" titleLabel="制度"></noConfilctDialog>
      </div>
      <div class="btn" slot="footer">
        <div class="feedback" v-if="compareResult === 1">
          <div class="hint" v-if="conflictDialogCheckBox">
            <!-- <span>我们会根据您的反馈意见优化算法，反馈意见不会改变冲突检测结果。</span> -->
          </div>
          <div class="btn-box" v-else>
            <span>结果不准确?</span>
            <el-button class="feedback-btn" @click="feedback">反馈意见</el-button>
          </div>
        </div>
        <el-button @click="handleCancel" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleComparison" class="comparison" :disabled="btnDisabled()">{{btnTxt}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
import { mapGetters } from 'vuex'
import confilctDialog from '@/modules/regulations-contrast/components/dialog/conflict-dialog'
import noConfilctDialog from '@/modules/regulations-contrast/components/dialog/no-conflict-dialog'
export default {
  components: {
    confilctDialog,
    noConfilctDialog
  },
  props: {},
  data () {
    return {
      loading: false,
      compareResult: 1,
      btnTxt: '确定',
      title: '合规性对比结果',
      dialogVisible: false,
      lawContrastResult: {}, // 对比结果
      compareId: null, // 对比记录id
      conflictDialogCheckBox: null, // 对比结果有冲突里的多选框
      feedbackChecked: [], // 反馈意见多选框组选中结果
      checkboxChecked: [] // 从接口获取多选框的状态用来和feedbackChecked进行比对、如果没有发生任何改变禁用提交反馈按钮
    }
  },
  computed: {
    ...mapGetters({
      token: 'token'
    })
  },
  mounted () {
    // this.getContrastResult()
  },
  methods: {
    download () {
      let downloadURL = this.$api.downloadContrastResultURL + `${this.compareId}?_token=${this.token}`
      window.open(downloadURL)
    },
    feedback () {
      this.checkboxChecked = []
      this.lawContrastResult.clash_data.forEach(outerItem => {
        outerItem.clash_list.forEach(innerItem => {
          this.checkboxChecked.push({ id: innerItem.id, compare_review: innerItem.compare_review })
        })
      })
      this.feedbackChecked = _.cloneDeep(this.checkboxChecked)
      this.openFeedbackBtn()
    },
    showDialog (compareId) {
      this.dialogVisible = true
      this.compareId = compareId
      this.getContrastResult(compareId)
    },
    handleCancel (bool) {
      if (this.btnTxt === '提交反馈意见') {
        this.closeFeedbackBtn()
        return
      }
      this.dialogVisible = false
    },
    handleComparison () {
      if (this.btnTxt === '提交反馈意见') {
        this.submitFeedback()
        return
      }
      this.dialogVisible = false
      this.closeFeedbackBtn()
    },
    getContrastResult (compareId) {
      if (!compareId) {
        return
      }
      this.loading = true
      this.lawContrastResult = {}
      this.$api.compareResult(compareId).then(res => {
        this.compareResult = res.data.result
        this.lawContrastResult = res.data
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    setFeedbackChecked (val) {
      this.feedbackChecked = val
    },
    submitFeedback () {
      if (this.feedbackChecked.length === 0) {
        return
      }
      this.loading = true
      var params = {
        review_data: JSON.stringify(this.feedbackChecked)
      }
      this.$api.submitFeedback(params).then(res => {
        console.log(res)
        this.loading = false
        this.$msgMnger.success('反馈成功')
        this.dialogVisible = false
        this.closeFeedbackBtn()
      }).catch(err => {
        console.log(err)
        this.loading = false
        this.$msgMnger.error('反馈失败')
        this.dialogVisible = false
        this.closeFeedbackBtn()
      })
    },
    openFeedbackBtn () {
      this.conflictDialogCheckBox = true
      this.btnTxt = '提交反馈意见'
      this.title = '合规性对比结果反馈意见'
    },
    closeFeedbackBtn () {
      this.conflictDialogCheckBox = false
      this.btnTxt = '确定'
      this.title = '合规性对比结果'
    },
    btnDisabled () {
      return _.isEqual(this.checkboxChecked, this.feedbackChecked) && this.btnTxt === '提交反馈意见'
    }
  }
}
</script>

<style lang="scss" scoped>

#comparison {
  width: 756px;
  height: auto;
  .from {
    padding: 0 15px;
  }
  .btn {
    width: 100%;
    height: 64px;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
    padding-right: 24px;
    background: $box-title-bg-color;
    .feedback{
      float: left;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      .btn-box{
        font-size: $fs-m;
        span{
          margin: 0 5px 0 73px;
          color: $sedondary-text-color;
        }
        .feedback-btn{
          width:72px;
          height:28px;
          border:1px solid rgba(48,128,254,1);
          color: #3080FE;
          background: transparent;
          text-align: center;
          padding: 0;
        }
        .feedback-btn:hover{
          color: #FFFFFF;
          background-color: #3080FE;
          border-color: #3080FE;
        }
      }
      .hint{
        span{
          font-size: 12px;
          margin-left: 24px;
          color: $sedondary-text-color;
        }
      }
    }
    .comparison, .cancel, .download {
      // height: 32px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .download {
      width: 78px;
    }
    .cancel {
      width: 65px;
      border: none;
      background: transparent;
      color: $sedondary-text-color;
    }
  }
}
</style>

<style lang="scss">

#comparison {
  position: relative;
  .el-dialog{
    width: 756px !important;
    border-radius: 8px;
    margin-top: 7vh !important;
    .el-dialog__header{
      background: #252C43;
      border-radius: 6px 6px 0 0;
      padding: 0 20px;
      height: 48px;
      line-height: 48px;
      .el-dialog__title{
        color: $header-text-color;
      }
    }
    .el-dialog__footer{
      padding: 0;
    }
  }
}
</style>
